<template>
  <div class="quotes  pb-108">
    <!-- <homeHeader /> -->
    <van-search v-model="keywords" class="rounded-xl" placeholder="搜索币对" />

    <div class="mt-10">
      <van-tabs v-model="active" swipeable :animated="isAnimated" sticky shrink :beforeChange="beforeChange"  color="#bcff2f" title-active-color="#bcff2f">
        <van-tab :title="item.text" v-for="item in tabList" :key="item.id" :name="item.id" class="broder-r-grey">

          <div v-if="active ==1" >
            <div v-if="!showOptionChoose">
              <div class="px-32">
                <div class="title my-10 mt-38" > {{ $t('选择交易对象') }}</div>
                <div class="optionalList flex flex-wrap items-center justify-between pt-34 ">
                  <div class="item w-290 p-32 mb-32 border-solid border rounded-2xl " v-for="item in optionalList " :key="item.id">
                    <van-cell  clickable  center @click="item.checked = !item.checked">
                      <template #default>
                        <div class="flex flex-col">
                          <div class="flex">
                            <strong> {{$t(item.currency1)}} </strong>
                            <span style="color: #999">/{{$t(item.currency2)}}</span>
                          </div>
                          <span class="font-Omit font-26" style="color: #999">{{ $t(item.name) }}</span>
                        </div>
                      </template>
                      <template #right-icon>
                        <van-checkbox v-model="item.checked"></van-checkbox>
                      </template>
                    </van-cell>
                  </div>
                </div>
                <div class="flex align-center justify-center">
                  <van-button type="default" round block class="mt-32 font-32 bg-white" @click="showOptionChoose = true">{{ $t('添加至自选') }}</van-button>
                </div>
              </div>
            </div>
  <!--          添加自选之后的列表-->
            <div v-if="showOptionChoose" class="mt-36">
              <div class="sys-tabs">
                <van-tabs v-model="optionActive" color="#fff" title-active-color="#fff">
                  <van-tab title="全部" name="all">
                    <div class=" mt-32 px-32">
                      <currencyList :list="optionCurrencyList"></currencyList>
                    </div>
                  </van-tab>
                </van-tabs>
              </div>
            </div>
          </div>
          <div v-if="active ==2">
            <div class="sys-tabs mt-36">
              <van-tabs v-model="marketActive" color="#fff"
                        :line-width="lineWidth"
                        aanimated
                        @change="marketTabChange"
                        swipeable title-active-color="#fff">
                <van-tab :name="item.id" v-for="item in marketTabList" :key="item.id" >
                  <template #title>
                    <span> {{item.text}}</span>
                    <span v-if="item.isNew" class="tab-new rounded-xl font-24 ml-10">New</span>
                  </template>
<!--                  币种-->
                  <div class="tab-content" v-if="marketActive == 1">
                    <div class="more mt-20">
                      <div class="flex absolute  h-50  font-26 items-center justify-center right-0  top-5 z-10 bg-black w-120"> 更多</div>
                    </div>
                    <div class="mt-30 money-tab-warp mr-120" :class="moneyTypeActive=== 2? 'money-tab2-warp': ''" >
                      <div class="">
                        <van-tabs v-model="moneyTypeActive" swipeable animated  line-height="0" >
                          <van-tab :name="typeItem.id"  v-for="typeItem in moneyTypeTabList" :key="typeItem.id">
                            <template #title>
                              <span class="w-52"> {{$t(typeItem.text)}}</span>
                            </template>
                            <div class="content">
                              <div class="mt-32 px-32">
                                <currencyList :list="allMoneyTypeList"></currencyList>
                              </div>
                            </div>
                          </van-tab>
                        </van-tabs>
                      </div>
                    </div>
                  </div>
<!--                  现货-->
                  <div class="tab-content" v-if="marketActive == 2">
                    <div class="more mt-20">
                      <div class="flex absolute  h-50 font-26 items-center justify-center right-0  top-5 z-10 bg-black w-120"  :class="marketActive == '2'? 'mr-100': ''"> 更多</div>
                      <div class="flex absolute  h-50  font-26 items-center justify-center right-0 top-5 z-10 bg-black w-120 usdt"  v-if="marketActive == 2">
                        USDT  <img src="@/assets/image/icon_bottom_1.png" alt="">
                      </div>
                    </div>
                    <div class="mt-30 money-tab-warp mr-120" :class="marketActive=== 2? 'money-tab2-warp': ''" >
                      <div class="">
                        <van-tabs v-model="moneyTypeActive" swipeable animated  line-height="0" >
                          <van-tab :name="typeItem.id"  v-for="typeItem in moneyTypeTabList" :key="typeItem.id">
                            <template #title>
                              <span class="w-52"> {{$t(typeItem.text)}}</span>
                            </template>
                            <div class="content">
                              <div class="mt-32 px-32">
                                <currencyList :list="allMoneyTypeList"></currencyList>
                              </div>
                            </div>
                          </van-tab>
                        </van-tabs>
                      </div>
                    </div>
                  </div>
<!--                  合约-->
                  <div class="tab-content" v-if="marketActive == 3">
                    <div class="more mt-20">
                      <div class="flex absolute  font-26 h-50 items-center justify-center right-0  top-5 z-10 bg-black w-120"  :class="marketActive == '3'? 'mr-160': ''"> 更多</div>
                      <div class="flex absolute font-26  h-50 items-center justify-center right-0 top-5 z-10 bg-black w-180 usdt"  v-if="marketActive == 3">
                        USDT 本位  <img src="@/assets/image/icon_bottom_1.png" alt="">
                      </div>
                    </div>
                    <div class="mt-30 money-tab-warp mr-120" :class="marketActive=== 3? 'money-tab3-warp': ''" >
                      <div class="">
                        <van-tabs v-model="moneyTypeActive" swipeable animated  line-height="0" >
                          <van-tab :name="typeItem.id"  v-for="typeItem in moneyTypeTabList" :key="typeItem.id">
                            <template #title>
                              <span class="w-52"> {{$t(typeItem.text)}}</span>
                            </template>
                            <div class="content">
<!--                              <van-tabs v-model="marketActive" color="#fff"-->
<!--                                        :line-width="lineWidth"-->
<!--                                        aanimated-->
<!--                                        line-height="0"-->
<!--                                        swipeable title-active-color="#fff">-->
<!--                                <van-tab name="btc" title="BTC">-->
<!--                                  <div class="px-32">-->
<!--                                      <currencyList :list="optionCurrencyList"></currencyList>-->

<!--                                  </div>-->
<!--                                </van-tab>-->
<!--                                <van-tab name="eth" title="ETH"></van-tab>-->
<!--                              </van-tabs>-->

                              <div class="mt-50 px-32">
                                <currencyList :list="optionCurrencyList"></currencyList>
                              </div>
                            </div>
                          </van-tab>
                        </van-tabs>
                      </div>
                    </div>
                  </div>
<!--                  盘前交易-->
                  <div class="tab-content" v-if="marketActive == 4">
                    <div class="mt-40 px-32">
                      <currencyList :list="tradeBeforeList"></currencyList>
                    </div>
                  </div>
<!--                  期权-->
                  <div class="tab-content" v-if="marketActive == 5">
                    <div class="mt-30 money-tab-warp mr-120" >
                      <div class="option-type-tab">
                        <van-tabs v-model="optionTypeActive" swipeable animated  line-height="0" >
                          <van-tab :name="typeItem.id"  v-for="typeItem in optionTabList " :key="typeItem.id">
                            <template #title>
                              <span class="w-52"> {{$t(typeItem.text)}}</span>
                            </template>
                            <div class="content mt-30 optionTpye">
                              <van-tabs v-model="concatTypeActive" color="#fff"
                                        line-height="0"
                                        aanimated
                                        @change="marketTabChange"
                                        swipeable title-active-color="#fff">
                                <van-tab name="btc" title="BTC" >

                                  <div class="px-32 mt-32">
                                    <option-contract-tab></option-contract-tab>
                                    <div class="mt-32">
                                      <option-contract-list :list="optionCurrencyListData"></option-contract-list>
                                    </div>
                                  </div>
                                </van-tab>
                                <van-tab name="eth" title="ETH" >
                                  <div class="mt-32">
                                      <option-contract-list :list="optionCurrencyListData"></option-contract-list>
                                    </div>
                                  </van-tab>
                              </van-tabs>
                            </div>
                          </van-tab>
                        </van-tabs>
                      </div>
                    </div>
                  </div>

                </van-tab>
              </van-tabs>
            </div>
          </div>
<!--          机会-->
          <div v-if="active ==3">
            <div class="mx-32 mt-30">
              <chance></chance>
              <div class="tady-market mt-40">
                <van-cell title="今日市场" is-link  size="large" arrow-direction="down" value="" />
                <div class="market-scale mt-20">
                  <!-- 进度条容器 -->
                  <div class="scale-bar relative h-15 rounded-full overflow-hidden">
                    <!-- 上涨进度条 -->
                    <div
                      class="up-bar absolute left-0 top-0 h-full bg-green"
                      :style="{ width: `${upPercent}%` }"
                    ></div>
                    <!-- 下跌进度条 -->
                    <div
                      class="down-bar absolute right-0 top-0 h-full bg-red"
                      :style="{ width: `${downPercent}%` }"
                    ></div>
                  </div>

                  <!-- 数值显示 -->
                  <div class="flex justify-between mt-12">
                    <div class="flex items-center">
                      <span class="text-green font-22">上涨: {{ upCount }}</span>
                    </div>
                    <div class="flex items-center">
                      <span class="text-red font-22">下跌: {{ downCount }}</span>
                    </div>
                  </div>
                </div>
                <div class="mt-50">
                  <van-cell title="榜单" is-link  size="large" to="" />
                </div>
                <div class="tab-content">

                    <div class="mt-30 money-tab-warp rank-tab mr-120" >
                      <div class="">
                        <van-tabs v-model="rankTabActive" swipeable animated   line-height="0" >

                          <van-tab :name="item.id"  v-for="item in rankTabList" :key="item.id">
                            <template #title>
                              <span class="w-52"> {{$t(item.title)}}</span>
                            </template>
                            <div class="content mt-40">
<!--                              不显示成交额-->
                              <currencyList :list="popularRankList" :dealNum="false"></currencyList>

                            </div>
                          </van-tab>
                        </van-tabs>
                      </div>
                    </div>
                  </div>
              </div>

            </div>
          </div>

        </van-tab>
      </van-tabs>
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs } from 'vant'
import ListQuatation from "@/components/list-quotation";
import { _myCoins, _getHomeList } from '@/API/home.api'
import { mapGetters, mapActions } from "vuex";
import { SET_COIN_LIST } from '@/store/const.store'

import homeHeader from '@/components/home/header.vue';

import currencyList from "@/components/market/currency-list.vue";
import optionContractTab from "@/components/market/optionContractTab.vue";
import optionContractList from "@/components/market/option-contract-list.vue";
import chance from "@/components/market/chance.vue";
export default {
  name: 'PageQoutes',
  components: {
    homeHeader,

    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    optionContractTab,
    currencyList,
    optionContractList,
    chance,
  },
  async created() {
    this.active = this.$route.query.active / 1
    if (this.userInfo.token) {
      const list = await _myCoins() // 获取我的自选
      this.myList = list.map(item => item.symbol) // 获取
    }
    // await this.fetchQoutes()
  },
  computed: {
    ...mapGetters({ coinList: 'home/coinList', userInfo: 'user/userInfo' }),
    // 计算上涨百分比
    upPercent() {
      const total = this.upCount + this.downCount +10
      return total ? (this.upCount / total) * 100 : 0
    },
    // 计算下跌百分比
    downPercent() {
      const total = this.upCount + this.downCount + 10
      return total ? (this.downCount / total) * 100 : 0
    }
  },
  data() {
    const arr = []
    for (let i = 0; i < 10; i++) {
      arr.push({ id: i })
    }
    return {
      tabActiveColor: '#bcff2f',
      showOptionChoose: false, //  显示添加自选之后的列表
      optionActive: 'all', //  自选。全部
      marketActive: '1',
      moneyTypeActive: '1', // 币种子集tab
      moneyTypeTabList:[
          {id:1, text: this.$t('全部'), data: arr, loading: true,},
          {id:2, text: this.$t('主流币'), data: arr, loading: true,},
          {id:3, text: this.$t('Layer1'), data: arr, loading: true,},
          {id:4, text: this.$t('Layer2'), data: arr, loading: true,},
          {id:5, text: this.$t('Layer2'), data: arr, loading: true,},
          {id:6, text: this.$t('Layer2'), data: arr, loading: true,},
          {id:7, text: this.$t('Layer3'), data: arr, loading: true,},
      ],
      marketTabList: [
        {id:1, text: this.$t('币种'), data: arr, loading: true, isNew: false,},
        {id:2, text: this.$t('现货'), data: arr, loading: true, isNew: false,},
        {id:3, text: this.$t('合约'), data: arr, loading: true, isNew: false,},
        {id:4, text: this.$t('盘前交易'), data: arr, loading: true, isNew: true,},
        {id:5, text: this.$t('交割合约'), data: arr, loading: true, isNew: false,},
      ],
      tabList: [
        { id: 1, text: this.$t('自选'), data: arr, loading: true },
        { id: 2, text: this.$t('市场'), data: arr, loading: true },
        { id: 3, text: this.$t('机会'), data: arr, loading: true },
      ],
      popularRankList: [ // 热门排行
        {
          id:1,
          currency1: 'BTC',
          currency2: 'USDT',
          newPrice1: '100,283.3',
          newPrice2: '$100,283.3',
          change_ratio: '1.8',
        },
        {
          id:2,
          currency1: 'ETH',
          currency2: 'USDT',
          newPrice1: '100,283.3',
          newPrice2: '$100,283.3',
          change_ratio: '2.5',
        },
        {
          id:3,
          currency1: 'OKB',
          currency2: 'USDT',
          newPrice1: '100,283.3',
          newPrice2: '$100,283.3',
          change_ratio: '1.8',
        }, {
          id:4,
          currency1: 'EOS',
          currency2: 'USDT',
          newPrice1: '100,283.3',
          newPrice2: '$100,283.3',
          change_ratio: '-1.8',
        }
      ],
      optionalList:[ // 自选列表
        {
          id:1,
          name:this.$t('Bitcoin'),
          checked: false,
          currency1: 'BTC',
          currency2: 'USDT',
        },
        {
          id:2,
          name:this.$t('Bitcoin'),
          checked: false,
          currency1: 'BTC',
          currency2: 'USDT',
        },
          {
            id:3,
            name:this.$t('Bitcoin'),
            checked: false,
            currency1: 'BTC',
            currency2: 'USDT',
          },
          {
            id:4,
            name:this.$t('Bitcoin'),
            checked: false,
            currency1: 'BTC',
            currency2: 'USDT',
          },
          {
            id:5,
            name:this.$t('Bitcoin'),
            checked: false,
           currency1: 'BTC',
            currency2: 'USDT',
          },
          {
            id:6,
            name:this.$t('Bitcoin'),
            checked: false,
            currency1: 'BTC',
            currency2: 'USDT',
          },

      ],
      allMoneyTypeList: [ //  币种-全部列表
        {
          id:1,
          currency1: 'BTC',
          // currency2: 'USDT',
          transactionCount: '$8.8亿',
          // type:'type1', // 10x 永续
          newPrice1: '100,283.3',
          newPrice2: '$100,283.3',
          change_ratio: '1.8',
        },
        {
          id:2,
          currency1: 'ETH',
          // currency2: 'USDT',
          transactionCount: '$8.8亿',
          // type:'type1', // 10x 永续
          newPrice1: '100,283.3',
          newPrice2: '$100,283.3',
          change_ratio: '2.5',
        },
        {
          id:3,
          currency1: 'OKB',
          // currency2: 'USDT',
          transactionCount: '$8.8亿',
          // type:'type1', // 10x 永续
          newPrice1: '100,283.3',
          newPrice2: '$100,283.3',
          change_ratio: '1.8',
        }, {
          id:4,
          currency1: 'EOS',
          // currency2: 'USDT',
          transactionCount: '$8.8亿',
          // type:'type1', // 10x 永续
          newPrice1: '100,283.3',
          newPrice2: '$100,283.3',
          change_ratio: '-1.8',
        }
      ],
      optionCurrencyList: [
        {
          id:1,
          currency1: 'BTC',
          currency2: 'USDT',
          transactionCount: '$8.8亿',
          type:'type1', // 10x 永续
          newPrice1: '100,283.3',
          newPrice2: '$100,283.3',
          change_ratio: '1.8',
        },
        {
          id:2,
          currency1: 'ETH',
          currency2: 'USDT',
          transactionCount: '$8.8亿',
          type:'type1', // 10x 永续
          newPrice1: '100,283.3',
          newPrice2: '$100,283.3',
          change_ratio: '2.5',
        },
        {
          id:3,
          currency1: 'OKB',
          currency2: 'USDT',
          transactionCount: '$8.8亿',
          type:'type1', // 10x 永续
          newPrice1: '100,283.3',
          newPrice2: '$100,283.3',
          change_ratio: '1.8',
        }, {
          id:4,
          currency1: 'EOS',
          currency2: 'USDT',
          transactionCount: '$8.8亿',
          type:'type1', // 10x 永续
          newPrice1: '100,283.3',
          newPrice2: '$100,283.3',
          change_ratio: '-1.8',
        }
      ],
      // 盘前交易
      tradeBeforeList: [
          {
            id:1,
            currency1: 'HYPEUSDT 交割',
            // currency2: 'USDT',
            transactionCount: '$8.8亿',
            // type:'type1', // 10x 永续
            newPrice1: '100,283.3',
            newPrice2: '$100,283.3',
            change_ratio: '1.8',
          },

      ],
      optionCurrencyListData: [
        {id: 1, price: '86,000',type: 'up',tagPrice: '$0.1436', change_ratio: '-1.5'},
        {id: 2, price: '86,000',type: 'up',tagPrice: '$0.1436', change_ratio: '-1.5'},
        {id: 3, price: '86,000',type: 'down',tagPrice: '$0.1436', change_ratio: '1.5'},
        {id: 4, price: '86,000',type: 'up',tagPrice: '$0.1436', change_ratio: '-1.5'},
        {id: 5, price: '86,000',type: 'up',tagPrice: '$0.1436', change_ratio: '2.5'},
        {id: 6, price: '86,000',type: 'up',tagPrice: '$0.1436', change_ratio: '2.5'},
        {id: 7, price: '86,000',type: 'up',tagPrice: '$0.1436', change_ratio: '2.5'},
      ],
      optionTypeActive: '1', // 期权
      optionTabList: [
        {id: '1', text: '合约列表'}
      ],
      concatTypeActive: 'BTC', // 合约列表下的合约类型

      lineWidth: 30,

      keywords: '', // 搜索关键字
      filterData: [],
      myList: [],
      active: 1,

      timeout: null,
      inputTimeout: null,
      duration: 1000,
      isAnimated: false,
      sortVal: 0,

      upCount: 62,    // 上涨数量
      downCount: 234, // 下跌数量
      rankTabActive: 1,
      rankTabList: [
          { id: '1', title: '热门榜',data: []},
          { id: '2', title: '涨幅榜',data: []},
          { id: '3', title: '跌幅榜',data: []},
          { id: '4', title: '新币榜',data: []},
          { id: '5', title: '飙升榜',data: []},
          { id: '6', title: '市值榜',data: []},
          { id: '7', title: '成交额榜',data: []},
      ]

    }
  },
  methods: {
    ...mapActions('home', [SET_COIN_LIST]),
    listSort(val) {
      this.sortVal = val
    },
    back() {
      this.$router.go(-1)
    },
    onInput() { // 输入
      if (this.inputTimeout) {
        clearTimeout(this.inputTimeout)
        this.inputTimeout = null
      }
      this.inputTimeout = setTimeout(() => {
        this.getFilterData()
      }, 50)
    },
    beforeChange() {
      this.keywords = ''
      return true
    },
    startTimeout() {
      this.clearTimeout()
      this.fetchQoutes()
    },
    clearTimeout() {
      if (this.timeout) {
        clearTimeout(this.timeout)
        this.timeout = null
      }
    },
    toggleFavorite(item) {
      item.favorite = !item.favorite;
    },
    marketTabChange(data) {
      console.log(data, '0999')
      this.moneyTypeActive = 1
      if(data ==4) {
        this.lineWidth =  100
      } else {
        this.lineWidth =  30
      }
    }
  },
  async activated() {

  },
  deactivated() {
    this.clearTimeout()
  },
  beforeDestroy() {
    this.clearTimeout()
    if (this.inputTimeout) {
      clearTimeout(this.inputTimeout)
      this.inputTimeout = null
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.isAnimated = true;
    })
  },

}

</script>
<style lang="scss" scoped>
.search-input {
  @include themify() {
    color: themed("text_color");
  }
}

.quotes {
  box-sizing: border-box;
  width: 100%;
  color: #fff;

  @include themify() {
    background: themed("main_background");
  }
}
.quotes ::v-deep.van-tab {
  flex: inherit;
  //padding: 0 2rem;
  width: 10rem;
  //height: 5rem;
  &:first-child {
    margin-left: 20px;
  }
}
//.quotes  ::v-deep .van-tabs__line {
//  width: 9rem;
//}
.quotes ::v-deep .van-tabs__nav {
  &:after {
    content: '';
    display: block;
    height: 0.415rem;
    width: 100%;
    background: #282829;
    position: absolute;
    bottom: 2rem;
  }
}
.quotes ::v-deep .van-tab__text--ellipsis {
  height: 5rem
}

.sys-tabs ::v-deep .van-tab {
  flex: inherit !important;
  width: auto !important;
  padding: 0 1rem;
}
.sys-tabs ::v-deep .van-tabs__line {
  //width: 5rem !important;
  height: 1px;
  //display: none;
}
.sys-tabs ::v-deep .van-tabs__wrap {
  height: 70px !important;
}

.sys-tabs ::v-deep .van-tabs__nav {
  &:after {
    content: '';
    display: block;
    height: 2px;
    width: 100%;
    background: #282829;
    position: absolute;
    bottom: 2rem;
  }
}
.sys-tabs ::v-deep .van-tab__text--ellipsis {
  height: 5rem
}

.money-tab-warp ::v-deep .van-tab {
  min-width: 8rem;
}
.money-tab-warp ::v-deep .van-tabs__nav {
  margin-right:7.5rem;
  &:after {
    display: none;
  }
}
.money-tab-warp ::v-deep .van-tab__text {
  font-size: 26px;
}
.money-tab2-warp ::v-deep .van-tabs__nav {
  margin-right: 15rem;
}
.money-tab3-warp ::v-deep .van-tabs__nav {
  margin-right: 17rem;
}
.money-tab-warp ::v-deep.van-tab {
  &:first-child {
    margin-left: 0px;
  }
}
.money-tab-warp ::v-deep .van-tab--active {
  background: #1a1a1a;
  border-radius: 6px;
}
.money-tab-warp ::v-deep .van-tabs__wrap {
  height: 3.125rem !important;
}
.money-tab-warp ::v-deep .van-tabs__line {
  display: none;
}

//合约
.optionTpye ::v-deep .van-tab--active {
  background: none;
}
.option-type-tab ::v-deep .van-tabs__wrap {
  padding-left: 1rem;
}
.option-type-tab ::v-deep .van-tab__text--ellipsis {
  height: auto ;
}

.optionTpye ::v-deep .van-tabs__wrap {
  padding-left: 0;
}

.optionTpye ::v-deep .van-tabs__nav {
  &:after {
    content: '';
    display: block;
    height: 2px;
    width: 100%;
    background: #282829;
    position: absolute;
    bottom: 2rem;
  }
}
.optionTpye ::v-deep .van-tabs__nav {
  margin-right: 0;
}
.optionTpye ::v-deep .van-tab {
  height: 2rem;
}


.rank-tab ::v-deep .van-tabs__nav {
    margin-right: 0;
  }

.rank-tab ::v-deep .van-tabs__wrap--scrollable .van-tab {
  padding: 0
}

.rank-tab ::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
  padding-left: 0;;
}


.quotes ::v-deep .van-button--default{
    color: #0d0d0d;

}
.quotes ::v-deep .van-tabs__nav {
  @include themify() {
    background: themed("main_background");
  }
}
.quotes ::v-deep.van-search {
  @include themify() {
    background: themed("main_background");
  }

}
.quotes ::v-deep .van-search__content {
  @include themify() {
    background: themed("main_background");
    border: 1px solid  #212121;
    border-radius:  10px;
    overflow: hidden;
  }
}
.quotes ::v-deep .van-tab--active {
  @include themify() {
    color: themed("text_color");
  }
}
.quotes ::v-deep .van-cell {
  @include themify() {
    background: themed("main_background");
    color: themed("text_color") !important;
  }
}



.inputBoxbg {
  @include themify() {
    background: themed("tab_background");
  }
}
.optionalList {
  .item {
    border-color: #212121;
    ::v-deep .van-cell__value {
      .flex{
        color: #fff;
      }
    }
  }
}
.bg-white {
  background: #fff !important;
}

/* 加密货币列表样式 */
.list-box {
  .van-cell {
    /* 设置文字颜色为白色 */
    ::v-deep .van-cell__value {
      color: #fff;
    }

    /* 币种名称和价格文字 */
    .left, .mid {
      color: #fff;
    }

    /* 涨跌幅保持原有的红绿色 */
    .right {
      &.text-green {
        color: #2abc5a;
      }
      &.text-red {
        color: #c7697f;
      }
    }
    &:not(:last-child)::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 0.5rem;
      bottom: 0;
      left: 0.5rem;
      border-bottom: 1px solid #212121;
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5)
    }

    /* 最后一个 van-cell 的下边线 */
    &:last-of-type::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 0.5rem;
      bottom: 0;
      left: 0.5rem;
      border-bottom: 1px solid #212121;
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5);
      display: block !important;
    }
  }
}

.tab-new {
  background: #BCFF2F;
  color: #000;
  padding: 0 2px;
}
.usdt {
  //position: relative;
  &:before {
    content: '';
    width: 1px;
    height: 45px;
    position: absolute;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    display: block;
    background: #282829;
    left: 0;

  }
}

.market-scale {
  .scale-bar {
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    position: relative;

    .up-bar {
      background: #30BD65;
      transition: width 0.3s ease;
      position: absolute;
      margin-right: 2px;
      z-index: 1;  // 添加 z-index
      left: 0;
      top: 0;
      height: 100%;

      &::after {
        content: '';
        position: absolute;
        right: -8px;
        top: 0;
        width: 20px;
        height: 100%;
        background: inherit;
        transform: skewX(-45deg);
      }
    }

    .down-bar {
      background: #EB4B6D;
      transition: width 0.3s ease;
      position: absolute;
      margin-left: 2px;
      z-index: 1;  // 添加相同的 z-index
      right: 0;
      top: 0;
      height: 100%;

      &::before {
        content: '';
        position: absolute;
        left: -8px;
        top: 0;
        width: 20px;
        height: 100%;
        background: inherit;
        transform: skewX(-45deg);
      }
    }
  }
}

</style>
